import useStore from '@/context/useStore';
import { IPageInfo, IQueryForm } from '@/utils/types';
import { Form, Button, Input, Row, Col, Select, Table, Badge, Space } from 'antd'
import { observer } from 'mobx-react-lite';
import { Key, useEffect, useState } from 'react';
import styles from './page.less'

function Page() {
  const [form] = Form.useForm();
  const { page } = useStore();
  const [select, setSelect] = useState<string[]>([]);
  const onFinish = (values: Partial<IQueryForm>) => {
    page.getPageList(values);
  }

  useEffect(() => {
    page.getPageList({});
  }, [])

  const onReset = () => {
    form.resetFields();
  }
  console.log('pageList...', page.pageList);
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '路径',
      dataIndex: 'path',
    },
    {
      title: '顺序',
      dataIndex: 'order',
    },
    {
      title: '阅读量',
      dataIndex: 'views',
    },
    {
      title: '状态',
      render: (text:any, row:IPageInfo)=>{
        return <Badge status="warning" text={row.status==="publish"?'已发布':'草稿'} />
      }
    },
    {
      title: '发布时间',
      dataIndex: 'publishAt',
    },
    {
      title: '操作',
      dataIndex: 'name',
      render: (text: any, record: IPageInfo) => (
        <Space size="middle">
          <span>编辑 {record.id}</span>
          <span>发布</span>
          <span>查看访问</span>
          <span>删除</span>
        </Space>
      ),
    }
  ];

  const onChange = (ids: Key[])=>{
    console.log('ids...', ids);
    setSelect(ids as string[])
  }
  return <>
    <Form
      form={form}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}>
      <Row>
        <Form.Item
          className={styles.formItem}
          label="名称"
          name="name"
        >
          <Input placeholder="请输入页面名称" />
        </Form.Item>

        <Form.Item
          className={styles.formItem}
          label="路径"
          name="path"
        >
          <Input placeholder="请输入页面路径" />
        </Form.Item>
        <Form.Item
          className={styles.formItem}
          label="状态"
          name="status"
        >
          <Select className={styles.select}>
            <Select.Option value="publish">已发布</Select.Option>
            <Select.Option value="draft">草稿</Select.Option>
          </Select>
        </Form.Item>
      </Row>
      <Row>
        <Col span={8} offset={16} className={styles.actions}>
          <Button type="primary" htmlType="submit">搜 索</Button>
          <Button onClick={onReset}>重 置</Button>
        </Col>
      </Row>
    </Form>

    {/* 批量操作 */}
    {select.length? <>
      <Button size="small">发布</Button>
      <Button>下线</Button>
      <Button>删除</Button>
    </>: null}
    <Table rowSelection={{type:'checkbox', onChange}} dataSource={page.pageList} rowKey="id" columns={columns}></Table>
  </>
}

export default observer(Page);
